<script setup>
import {inject} from "vue";
const {baseInfo,workInfo,skillsInfo,projectInfo,schoolInfo,selfInfo,themeColor,typography,spacing,mode} = inject('data')
// 从baseInfo中提取自定义模块（第6个及以后的元素）
const customModules = baseInfo.slice(6)
</script>

<template>
  <div class="pre-container model-wrapper">
    <div class="pre-main">
      <div class="pre-baseInfo pre-list-item">
        <!-- 左侧头像区域 -->
        <div class="pre-baseInfo-image" v-if="baseInfo[0].materialList[0].isShow" :style="{'width':baseInfo[0].materialList[0].width+'px'||'120px','height':baseInfo[0].materialList[0].height+'px'??'120px'}">
          <el-image :src="baseInfo[0].materialList[0].url" fit="cover"></el-image>
        </div>
        
        <!-- 右侧信息区域 -->
        <div class="pre-baseInfo-content">
          <!-- 顶部姓名和职位 -->
          <div class="pre-baseInfo-header">
            <div class="pre-baseInfo-name">{{ baseInfo[0].baseInfoList[0].value }}</div>
            <div class="pre-baseInfo-work">{{ baseInfo[0].baseInfoList[1].value }}</div>
          </div>
          
          <!-- 详细信息列表 -->
          <div class="pre-baseInfo-list">
            <div 
              class="pre-baseInfo-item" 
              v-for="(item, index) in [...baseInfo[0].baseInfoList.slice(2), ...baseInfo[0].customList]" 
              :key="index"
            >
              <div class="pre-baseInfo-icon" v-if="item.isShow">
                <el-icon><component :is="item.icon ||'Grid'" /></el-icon>
              </div>
              <div class="pre-baseInfo-text" v-if="item.isShow">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="pre-list">
        <!-- 工作经验 -->
        <div class="pre-list-item" v-if="workInfo.isShow">
          <div class="pre-item-content">
            <div class="pre-item-title">{{ workInfo.title }}</div>
            <div class="pre-content-list">
              <div v-for="(e, index) in workInfo.itemList" :key="index">
                <div class="pre-content-title" v-if="e.isShow">
                  <div class="pre-content-title-text">
                    <div class="title">
                      <span class="title-name">{{ e.itemInfo.companyName.value??'' }}</span>
                      <span class="title-sub">{{ e.itemInfo.workPost.value??'' }}</span>
                      <span class="title-time">{{ e.itemInfo.workTime.value??'' }}</span>
                    </div>
                  </div>
                  <div class="pre-content-main" v-html="e.itemInfo.itemContent.value"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 专业技能 -->
        <div class="pre-list-item" v-if="skillsInfo.isShow">
          <div class="pre-item-content">
            <div class="pre-item-title">{{ skillsInfo.title }}</div>
            <div class="pre-content" v-html="skillsInfo.value"></div>
          </div>
        </div>
        
        <!-- 项目经历 -->
        <div class="pre-list-item" v-if="projectInfo.isShow">
          <div class="pre-item-content">
            <div class="pre-item-title">{{ projectInfo.title }}</div>
            <div class="pre-content-list">
              <div v-for="(e, index) in projectInfo.itemList" :key="index">
                <div class="pre-content-title" v-if="e.isShow">
                  <div class="pre-content-title-text">
                    <div class="title">
                      <span class="title-name">{{ e.itemInfo.projectName.value??'' }}</span>
                      <span class="title-sub">{{ e.itemInfo.projectRole.value??'' }}</span>
                      <span class="title-time">{{ e.itemInfo.projectTime.value??'' }}</span>
                    </div>
                  </div>
                  <div class="pre-content-main" v-html="e.itemInfo.itemContent.value"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 教育经历 -->
        <div class="pre-list-item" v-if="schoolInfo.isShow">
          <div class="pre-item-content">
            <div class="pre-item-title">{{ schoolInfo.title }}</div>
            <div class="pre-content-list">
              <div v-for="(e, index) in schoolInfo.itemList" :key="index">
                <div class="pre-content-title" v-if="e.isShow">
                  <div class="pre-content-title-text">
                    <div class="title">
                      <span class="title-name">{{ e.itemInfo.schoolName.value??'' }}</span>
                      <span class="title-sub">{{ (e.itemInfo.schoolMajor.value??'')+' - '+e.itemInfo.schoolDegree.value??+'' }}</span>
                      <span class="title-time">{{ (e.itemInfo.schoolStartTime.value??'')+' - '+e.itemInfo.schoolEndTime.value??'' }}</span>
                    </div>
                  </div>
                  <div class="pre-content-main" v-html="e.itemInfo.itemContent.value"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 个人简介 -->
        <div class="pre-list-item" v-if="selfInfo.isShow">
          <div class="pre-item-content">
            <div class="pre-item-title">{{ selfInfo.title }}</div>
            <div class="pre-content" v-html="selfInfo.value"></div>
          </div>
        </div>
        <div v-for="(model,index) in customModules" :key="index">
 <div class="pre-list-item" v-if="model.isShow">
          <div class="pre-item-content" >
            <div class="pre-item-title">{{ model.title }}</div>
            <div class="pre-content" v-html="model.value"></div>
          </div>
        </div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<style scoped>
.pre-item-content{

}
.pre-content-title-text{
  font-size: v-bind('typography.titleFontSize.value + "px"');
  margin-bottom: v-bind('spacing.projectContentSpacing.value + "px"');
}
.pre-list{
  line-height: v-bind('typography.lineHeight.value');
  font-size: v-bind('typography.fontSize.value + "px"');
}
.pre-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: v-bind('typography.fontColor.value');
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.pre-main {
  display: flex;
  flex-direction: column;
  gap: v-bind('spacing.paragraphSpacing.value + "px"');
}

.pre-list-item {
  margin-bottom: v-bind('spacing.paragraphSpacing.value + "px"');
  
}

.pre-baseInfo {
  display: flex;
  gap: 20px;
  margin-bottom: v-bind('spacing.paragraphSpacing.value + "px"');
}

.pre-baseInfo-image {
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.pre-baseInfo-image .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pre-baseInfo-content {
  flex: 1;
}

.pre-baseInfo-header {
  margin-bottom: 15px;
}

.pre-baseInfo-name {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 5px;
}

.pre-baseInfo-work {
   color: #000;
   font-size: 20px;
  font-weight: 500;
}

.pre-baseInfo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.pre-baseInfo-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pre-baseInfo-icon {
  color: v-bind('themeColor.color');
}

.pre-item-title {
  font-size: v-bind('typography.moduleTitleFontSize.value + "px"');
  font-weight: bold;
  color: v-bind('themeColor.color');
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid v-bind('themeColor.color');
}

.pre-content-list {
  display: flex;
  flex-direction: column;
  gap: v-bind('spacing.projectSpacing.value + "px"');
}

.pre-content-title {
  
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-weight: 500;
}

.title-name {
  font-weight: bold;
}

.title-sub {
  flex: 1;
  margin: 0 10px;
  text-align: v-bind('mode.subTitleMode.value ? "center" : "left"');
  color: #666;
}

.title-time {
  color: #999;
}

.pre-content-main {
  line-height: 1.6;
}

.pre-content-main ul {
  padding-left: 20px;
}

.pre-content-main li {
  margin-bottom: 5px;
}

.pre-content {
  line-height: 1.6;
}
</style>